<template>
  <div class="dispute-container">
    <!-- 左侧内容 -->
    <div class="left-content">
      <!-- 数据统计卡片 -->
      <div class="stat-card">
        <div class="card-title">年度调解数据</div>
        <div class="year-stats">
          <div class="year-item">
            <span class="year">2022年</span>
            <span class="count">199起</span>
          </div>
          <div class="year-item">
            <span class="year">2023年</span>
            <span class="count">205起</span>
          </div>
          <div class="year-item">
            <span class="year">2024年</span>
            <span class="count">210起</span>
          </div>
        </div>
        <div class="success-rate">
          <span class="label">调解成功率</span>
          <span class="rate">98%</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="card-title">调解方式分布</div>
        <div id="methodChart" ref="methodChart" style="height: 200px;"></div>
      </div>

      <div class="stat-card">
        <div class="card-title">解决途径</div>
        <div class="methods-flow">
          <div class="method-step" v-for="(method, index) in resolutionMethods" :key="index">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <div class="step-title">{{ method.title }}</div>
              <div class="step-desc">{{ method.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div class="center-content">
      <div class="map-container">
        <div class="card-title">劳动纠纷分布地图</div>
        <div id="disputeMap" ref="disputeMap"></div>
      </div>

      <div class="dispute-types">
        <div class="card-title">纠纷类型分布</div>
        <div id="disputeTypeChart" ref="disputeTypeChart" style="height: 100%;"></div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <div class="case-showcase">
        <div class="card-title">典型案例</div>
        <div class="case-list">
          <div class="case-item" v-for="(item, index) in typicalCases" :key="index">
            <div class="case-header">
              <span class="case-type">{{ item.type }}</span>
              <span class="case-date">{{ item.date }}</span>
            </div>
            <div class="case-title">{{ item.title }}</div>
            <div class="case-desc">{{ item.description }}</div>
          </div>
        </div>
      </div>

      <div class="process-guide">
        <div class="card-title">调解流程</div>
        <div class="process-steps">
          <div class="process-step" v-for="(step, index) in processSteps" :key="index">
            <div class="step-icon">
              <i :class="step.icon"></i>
            </div>
            <div class="step-info">
              <div class="step-title">{{ step.title }}</div>
              <div class="step-desc">{{ step.description }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="card-title">调解效果</div>
        <div class="effect-stats">
          <div class="effect-item">
            <span class="effect-label">满意度</span>
            <span class="effect-value">96%</span>
          </div>
          <div class="effect-item">
            <span class="effect-label">成功率</span>
            <span class="effect-value">98%</span>
          </div>
          <div class="effect-item">
            <span class="effect-label">回访率</span>
            <span class="effect-value">100%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 纠纷详情弹窗 -->
    <div class="detail-modal" v-if="showDetailModal" @click.self="closeDetailModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">
            <i :class="selectedType?.icon"></i>
            {{ selectedType?.name }}详情分析
          </div>
          <div class="close-btn" @click="closeDetailModal">×</div>
        </div>
        <div class="modal-body">
          <div class="detail-chart" ref="detailChart"></div>
          <div class="detail-stats">
            <div class="stat-item" v-for="(detail, index) in selectedType?.details" :key="index">
              <div class="stat-name">{{ detail.name }}</div>
              <div class="stat-count">{{ detail.count }}起</div>
              <div class="stat-bar">
                <div class="bar-fill" :style="{ width: (detail.count / selectedType.count * 100) + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* global TMap */  // 声明 TMap 为全局变量
import * as echarts from 'echarts'

export default {
  name: 'DisputeResolution',
  data() {
    return {
      map: null,
      laborDisputes: [
        {
          position: { lat: 39.744568, lng: 98.493843 }, // 金泉路附近某工厂
          title: '工资纠纷',
          content: '某建筑工地拖欠农民工工资纠纷，涉及金额约15万元',
          type: 'wage'
        },
        {
          position: { lat: 39.745123, lng: 98.494256 }, // 金泉路商业区
          title: '劳动合同纠纷',
          content: '某商场与员工就违法解除劳动合同产生纠纷',
          type: 'contract'
        },
        {
          position: { lat: 39.743987, lng: 98.493567 }, // 金泉路工业园区
          title: '工伤赔偿纠纷',
          content: '某制造企业发生工伤事故，就赔偿金额存在分歧',
          type: 'injury'
        },
        {
          position: { lat: 39.744234, lng: 98.494789 }, // 金泉路商贸城
          title: '社保纠纷',
          content: '商贸城商户未按规定缴纳员工社会保险，引发劳资纠纷',
          type: 'insurance'
        },
        {
          position: { lat: 39.744876, lng: 98.493234 }, // 金泉路夜市区
          title: '加班工资纠纷',
          content: '夜市商户与员工就加班工资计算产生纠纷',
          type: 'overtime'
        }
      ],
      disputeTypes: [
        { 
          name: '民事纠纷', 
          count: 156, 
          icon: 'el-icon-user',
          details: [
            { name: '婚姻家事纠纷', count: 45 },
            { name: '继承纠纷', count: 28 },
            { name: '邻里关系纠纷', count: 35 },
            { name: '物业纠纷', count: 30 },
            { name: '其他民事纠纷', count: 18 }
          ]
        },
        { 
          name: '经济纠纷', 
          count: 142, 
          icon: 'el-icon-money',
          details: [
            { name: '合同纠纷', count: 48 },
            { name: '借贷纠纷', count: 35 },
            { name: '消费纠纷', count: 32 },
            { name: '房屋买卖纠纷', count: 15 },
            { name: '其他经济纠纷', count: 12 }
          ]
        },
        { 
          name: '劳动纠纷', 
          count: 128, 
          icon: 'el-icon-s-cooperation',
          details: [
            { name: '工资报酬纠纷', count: 45 },
            { name: '劳动合同纠纷', count: 35 },
            { name: '工伤赔偿纠纷', count: 25 },
            { name: '社会保险纠纷', count: 15 },
            { name: '其他劳动纠纷', count: 8 }
          ]
        },
        { 
          name: '行政纠纷', 
          count: 86, 
          icon: 'el-icon-office-building',
          details: [
            { name: '行政处罚纠纷', count: 32 },
            { name: '行政许可纠纷', count: 25 },
            { name: '城市管理纠纷', count: 18 },
            { name: '其他行政纠纷', count: 11 }
          ]
        },
        { 
          name: '刑事纠纷', 
          count: 64, 
          icon: 'el-icon-warning',
          details: [
            { name: '轻微刑事案件', count: 28 },
            { name: '刑事和解案件', count: 20 },
            { name: '刑事附带民事案件', count: 16 }
          ]
        },
        { 
          name: '特殊领域纠纷', 
          count: 92, 
          icon: 'el-icon-help',
          details: [
            { name: '医疗纠纷', count: 35 },
            { name: '教育纠纷', count: 25 },
            { name: '环境污染纠纷', count: 20 },
            { name: '其他特殊纠纷', count: 12 }
          ]
        },
        { 
          name: '新型社会矛盾', 
          count: 78, 
          icon: 'el-icon-connection',
          details: [
            { name: '网络纠纷', count: 30 },
            { name: '信息安全纠纷', count: 25 },
            { name: '知识产权纠纷', count: 15 },
            { name: '其他新型纠纷', count: 8 }
          ]
        }
      ],
      typicalCases: [
        {
          type: '邻里纠纷',
          date: '2024-03-15',
          title: '楼上漏水引发赔偿纠纷',
          description: '楼上住户水管破裂导致楼下装修受损，双方就赔偿金额产生分歧。',
          result: '通过社区调解，双方达成赔偿协议，楼上住户赔偿楼下住户装修损失5000元。'
        },
        {
          type: '家庭纠纷',
          date: '2024-03-10',
          title: '老人赡养问题调解',
          description: '子女对老人赡养责任分配存在争议，老人生活得不到保障。',
          result: '经调解，子女达成轮流赡养协议，确保老人生活起居得到妥善照顾。'
        },
        {
          type: '经济纠纷',
          date: '2024-03-05',
          title: '装修合同纠纷调解',
          description: '装修公司未按合同约定完成工程，业主拒绝支付尾款。',
          result: '经调解，装修公司承诺限期完成工程，业主同意支付部分尾款。'
        }
      ],
      processSteps: [
        {
          icon: 'el-icon-document',
          title: '受理登记',
          description: '接收纠纷当事人申请，进行基本信息登记'
        },
        {
          icon: 'el-icon-chat-dot-round',
          title: '调查了解',
          description: '走访调查，了解纠纷具体情况和双方诉求'
        },
        {
          icon: 'el-icon-connection',
          title: '组织调解',
          description: '组织双方进行调解，促进达成和解协议'
        },
        {
          icon: 'el-icon-check',
          title: '跟踪回访',
          description: '对调解结果进行跟踪回访，确保协议履行'
        }
      ],
      resolutionMethods: [
        { 
          title: '协商',
          description: '双方直接沟通解决'
        },
        {
          title: '调解',
          description: '通过居委会、第三方机构介入'
        },
        {
          title: '仲裁',
          description: '依协议提交仲裁机构'
        },
        {
          title: '诉讼',
          description: '向法院起诉'
        }
      ],
      selectedType: null,
      showDetailModal: false,
      methodChart: null,
      detailChart: null
    }
  },
  mounted() {
    this.initMethodChart()
    this.initMap()
    this.initDisputeTypeChart()
  },
  methods: {
    initMethodChart() {
      this.methodChart = echarts.init(this.$refs.methodChart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#00c6ff', '#0082ff', '#0058ff', '#7eb9ff'],
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 40, name: '警网融合联动调解' },
            { value: 30, name: '司法干警专业调解' },
            { value: 20, name: '义警队伍民间调解' },
            { value: 10, name: '其他' }
          ],
          label: {
            color: '#7eb9ff',
            formatter: '{b}\n{c}%'
          }
        }]
      }
      this.methodChart.setOption(option)
    },
    initMap() {
      // 创建地图实例
      this.map = new TMap.Map(document.getElementById('disputeMap'), {
        center: new TMap.LatLng(39.744568, 98.493843), // 金泉路中心点
        zoom: 16,
        viewMode: '2D',
        baseMap: {
          type: 'vector',
          features: ['base', 'building2d', 'building3d', 'point', 'label'],
          theme: 'style2' // 使用新的地图样式
        },
        mapStyleId: '4c5c88f1c7d2347e99e5e5e7d22afd7f' // 使用自定义样式
      })

      // 定义标记点样式
      const markerStyles = {
        'wage': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#FF4D4F' // 红色
        }),
        'contract': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#1890FF' // 蓝色
        }),
        'injury': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#FAAD14' // 黄色
        }),
        'insurance': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#52C41A' // 绿色
        }),
        'overtime': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#722ED1' // 紫色
        })
      }

      // 创建标记点图层
      const markers = this.laborDisputes.map(dispute => {
        return {
          id: dispute.title,
          styleId: dispute.type,
          position: new TMap.LatLng(dispute.position.lat, dispute.position.lng),
          properties: {
            title: dispute.title,
            content: dispute.content
          }
        }
      })

      // 创建标记点图层
      const markerLayer = new TMap.MultiMarker({
        map: this.map,
        styles: markerStyles,
        geometries: markers
      })

      // 创建文本标记样式
      const labelStyle = {
        color: '#00c6ff',
        fontSize: '13px',
        fontWeight: 'bold',
        backgroundColor: 'rgba(0,24,48,0.85)',
        padding: '5px 10px',
        borderRadius: '3px',
        border: '1px solid rgba(0,198,255,0.3)',
        offset: { y: -42 },
        boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
      }

      // 创建文本标记
      const labels = this.laborDisputes.map(dispute => {
        return {
          position: new TMap.LatLng(dispute.position.lat, dispute.position.lng),
          content: dispute.title,
          style: labelStyle
        }
      })

      // 添加文本图层
      new TMap.MultiLabel({
        map: this.map,
        styles: { label: { } },
        geometries: labels
      })

      // 创建信息窗口
      const infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: new TMap.LatLng(39.744568, 98.493843),
        content: '',
        offset: { x: 0, y: -35 }
      })

      // 添加点击事件
      markerLayer.on('click', (evt) => {
        const marker = evt.geometry
        this.showInfoWindow(marker, infoWindow)
      })

      // 初始显示第一个点位的信息
      this.showInfoWindow(markers[0], infoWindow)

      // 添加金泉路标签
      new TMap.MultiLabel({
        map: this.map,
        styles: {
          label: {
            color: '#00c6ff',
            fontSize: '16px',
            fontWeight: 'bold',
            backgroundColor: 'rgba(0,24,48,0.85)',
            padding: '8px 15px',
            borderRadius: '4px',
            border: '2px solid rgba(0,198,255,0.5)',
            boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
          }
        },
        geometries: [{
          position: new TMap.LatLng(39.744568, 98.493843),
          content: '金泉路社区'
        }]
      })
    },
    initDisputeTypeChart() {
      const chartDom = this.$refs.disputeTypeChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c} 起'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.disputeTypes.map(item => item.name),
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 12,
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)',
            formatter: '{value} 起'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.1)'
            }
          }
        },
        series: [{
          type: 'bar',
          data: this.disputeTypes.map(item => item.count),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: '#00c6ff' },
              { offset: 1, color: '#0082ff' }
            ]),
            borderRadius: [4, 4, 0, 0]
          },
          barWidth: '30%',
          label: {
            show: true,
            position: 'top',
            color: '#00c6ff',
            formatter: '{c} 起'
          }
        }]
      }
      myChart.setOption(option)
      
      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    showDisputeDetail(type) {
      this.selectedType = type
      this.showDetailModal = true
      this.$nextTick(() => {
        this.initDetailChart()
      })
    },
    initDetailChart() {
      if (!this.selectedType) return
      
      this.detailChart = echarts.init(this.$refs.detailChart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 起 ({d}%)'
        },
        color: ['#00c6ff', '#0082ff', '#0058ff', '#7eb9ff'],
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.selectedType.details.map(item => ({
            name: item.name,
            value: item.count
          })),
          label: {
            color: '#7eb9ff',
            formatter: '{b}\n{c}起'
          }
        }]
      }
      this.detailChart.setOption(option)
    },
    closeDetailModal() {
      this.showDetailModal = false
      this.selectedType = null
    },
    // 添加显示信息窗口的方法
    showInfoWindow(marker, infoWindow) {
      infoWindow.setPosition(marker.position)
      infoWindow.setContent(`
        <div style="padding: 12px; background: rgba(0,24,48,0.95); border-radius: 4px; border: 1px solid rgba(0,198,255,0.3); box-shadow: 0 2px 12px rgba(0,0,0,0.3);">
          <h4 style="margin: 0 0 8px; color: #00c6ff; font-size: 16px; border-bottom: 1px solid rgba(0,198,255,0.2); padding-bottom: 8px;">${marker.properties.title}</h4>
          <p style="margin: 0; color: #fff; font-size: 14px; line-height: 1.5;">${marker.properties.content}</p>
        </div>
      `)
      infoWindow.open()
    }
  },
  beforeDestroy() {
    if (this.methodChart) {
      this.methodChart.dispose()
    }
    if (this.detailChart) {
      this.detailChart.dispose()
    }
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style scoped>
.dispute-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 40px);
  width: 100%;
  padding: 20px;
  color: #fff;
  background: #001324;
  box-sizing: border-box;
  overflow: hidden;
}

.left-content, .right-content {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-bottom: 20px;
}

.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 20px;
}

.map-container {
  flex: 3;
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100% - 40px);
}

.dispute-types {
  flex: 2;
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
}

#disputeMap {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 4px;
  overflow: visible !important;
}

#disputeTypeChart {
  flex: 1;
  min-height: 300px;
  height: 100%;
}

/* 添加滚动条样式 */
.left-content::-webkit-scrollbar,
.center-content::-webkit-scrollbar,
.right-content::-webkit-scrollbar {
  width: 6px;
}

.left-content::-webkit-scrollbar-thumb,
.center-content::-webkit-scrollbar-thumb,
.right-content::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 255, 0.3);
  border-radius: 3px;
}

.left-content::-webkit-scrollbar-track,
.center-content::-webkit-scrollbar-track,
.right-content::-webkit-scrollbar-track {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 3px;
}

.stat-card, .case-showcase, .process-guide, .dispute-types {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
}

.effect-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.effect-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.effect-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.effect-value {
  color: #00c6ff;
  font-size: 24px;
}

.card-title {
  color: #fff;
  font-size: 16px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 10px;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #00c6ff;
}

.year-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.year-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.year {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.count {
  font-size: 20px;
  color: #00c6ff;
}

.success-rate {
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 198, 255, 0.3);
}

.rate {
  font-size: 32px;
  color: #00c6ff;
  margin-left: 10px;
}

.section-title {
  font-size: 16px;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
  padding-left: 10px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #00c6ff;
}

.types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px;
}

.type-card {
  background: rgba(0, 24, 48, 0.4);
  border: 1px solid rgba(0, 198, 255, 0.15);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  height: 70px;
}

.type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 198, 255, 0.05), rgba(0, 130, 255, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.type-card:hover {
  border-color: rgba(0, 198, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 198, 255, 0.15);
}

.type-card:hover::before {
  opacity: 1;
}

.type-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 198, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  position: relative;
  z-index: 1;
}

.type-icon i {
  font-size: 18px;
  color: #00c6ff;
  transition: transform 0.3s ease;
}

.type-card:hover .type-icon i {
  transform: scale(1.1);
}

.type-content {
  flex: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.type-name {
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.type-count {
  font-size: 18px;
  color: #00c6ff;
  font-weight: bold;
  display: flex;
  align-items: baseline;
}

.type-count::after {
  content: '起';
  font-size: 12px;
  margin-left: 4px;
  color: rgba(0, 198, 255, 0.7);
  font-weight: normal;
}

.methods-flow {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.method-step {
  display: flex;
  align-items: center;
  background: rgba(0, 24, 48, 0.8);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #00c6ff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: 15px;
}

.step-content {
  flex: 1;
}

.step-title {
  color: #00c6ff;
  margin-bottom: 5px;
}

.step-desc {
  font-size: 14px;
  color: #7eb9ff;
}

.case-showcase {
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 15px;
}

.case-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.case-item {
  background: rgba(0, 24, 48, 0.2);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 12px;
}

.case-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.case-type {
  color: #00c6ff;
  font-size: 13px;
}

.case-date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.case-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 8px;
}

.case-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 8px;
}

.case-result {
  font-size: 14px;
}

.result-label {
  color: #00c6ff;
}

.process-guide {
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 15px;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.process-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(0, 24, 48, 0.2);
  border-radius: 4px;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 198, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon i {
  font-size: 16px;
  color: #00c6ff;
}

.step-info {
  flex: 1;
}

.step-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 19, 36, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: #001324;
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  width: 80%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid rgba(0, 198, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #fff;
}

.modal-body {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detail-chart {
  height: 300px;
}

.detail-stats {
  padding: 20px;
}

.stat-item {
  margin-bottom: 20px;
}

.stat-name {
  color: #7eb9ff;
  margin-bottom: 5px;
}

.stat-count {
  color: #00c6ff;
  font-size: 18px;
  margin-bottom: 5px;
}

.stat-bar {
  height: 6px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(to right, #00c6ff, #0082ff);
  border-radius: 3px;
  transition: width 0.3s ease;
}
</style> 